<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    表单：用于收集用户输入的信息，常用在登录，注册，信息的修改
  -->
  <!-- 
    单行文本框：<input type="text">
      type属性: 表示控件的类型，text文本框,password密码框，number数字框等
      maxlength属性: 文本框最大字符输入长度限制
      placeholder属性: 文本框占位文字
      value属性 ： 文本框的值,可以通过js获取值
      disabled属性: 表示控件不可用,禁用
      readonly属性: 只读，不可对其进行编辑
      required属性: 必填，在表单提交时，会发生表单验证
      autofocus属性: 自动获取焦点
   -->

   <!-- action是表单需要提交到的地址 -->
   <form  action="http://www.baidu.com">
    账号: <input 
    type="text"
    maxlength="11"
    placeholder="请输入账号/手机号"
    required
    autofocus
    >
    <!-- 
      密码框:<input type="password">
        属性参照单行文本框
    -->
    <input type="password" 
    maxlength="5"  
    placeholder="请输入密码"
    >
    <!-- 
      日期选择器：<input type="date">
          value属性: 控件的值，可以通过js获取，默认值
                    注意，日期的格式为yyyy-mm-dd，月和日需要补齐两位数
     -->
    <input 
    type="date" 
    value="2022-09-05"
    >
    <!--  
        单选按钮:<input type="radio">
            name属性: 用于给单选按钮分组
            value属性: 用于给js操作的
            checked属性: 默认选中
            disbled属性: 失效/禁用
    -->
    <input type="radio" name="gender" value="1" checked disabled>男
    <input type="radio" name="gender" value="0" >女
    <br>

    <!-- 
        多选按钮: <input type="checkbox">
            checked属性:默认选中
            disabled属性: 失效/禁用
            value属性 :用于给js操作的，获取该控件的值
     -->
     爱好: <input type="checkbox" checked value="1">唱
           <input type="checkbox" checked value="2">跳
           <input type="checkbox" checked value="3">rap
           <input type="checkbox" disabled value="4">打篮球

    <h2>按钮</h2>
     <!-- 
        按钮:
           分为单标签按钮、双标签按钮
        单标签按钮：<input type="button">
            value属性: 按钮内部的值
            按钮功能类型：
              1.普通按钮: <input type="button">
              2.提交按钮: <input type="submit"> value值默认为提交
              3.重置按钮: <input type="reset"> 
                  value值默认为重置，清空当前表单的信息
                  注意，重置功能必须要有form标签包裹才有用，因为重置的是表单中的信息
        双标签按钮: <button>按钮</button>
            按钮功能类型：
              1.普通按钮： <button type="button">普通按钮</button>
              2.提交按钮：<button type="submit">提交按钮</button>
              2.提交按钮：<button type="reset">重置按钮</button>
            
      -->
      <input type="button" value="注册">
      <input type="submit">
      <input type="reset">
      <button type="button">普通按钮</button>
      <button type="submit">提交按钮</button>
      <button type="reset">重置按钮</button>



    <div>=======================================================</div>
    <button disabled>登录</button>
    <button type="submit">提交</button>
   </form>
</body>
</html>